<template>
  <div>
    <div class="integral">
      <div class="integral__title">| 积分使用规则</div>
      <div class="integral__content">
        <el-input
          type="textarea"
          :rows="5"
          placeholder="请输入内容"
          v-model="ruleModel.useRuleIntroduce"
          style="width: 600px; font-size: 14px"
          maxlength="255"
        ></el-input>
      </div>
      <div class="integral__title">| 积分有效期</div>
      <div class="integral__content" style="font-size: 14px">
        积分有效期为
        <el-input-number
          :min="0"
          step="1"
          :controls="false"
          v-model="ruleModel.integralValidity"
          style="width: 50px"
        ></el-input-number
        >个月
      </div>
      <div class="integral__title">| 积分值规则</div>
      <div class="integral__content">
        <el-input
          type="textarea"
          :rows="3"
          placeholder="请输入内容"
          v-model="ruleModel.integralRuleInfo"
          style="width: 600px; font-size: 14px"
          maxlength="450"
        ></el-input>
      </div>
      <div class="integral__title">| 积分获取规则</div>
      <div class="integral__content" v-for="(item, index) in list" :key="index">
        <div v-if="item.ruleType === 0" style="font-size: 14px">
          <el-checkbox v-model="item.open"></el-checkbox>
          <span style="margin-left: 10px">分享</span>
          <span style="color: #d3d3d3">（限制用户首次分享才可获得积分）</span>
          <div class="integral__content--ruleInput">
            每日首次分享获得
            <el-input-number
              :min="0"
              step="1"
              :controls="false"
              v-model="item.integralRuleParameterDtos[0].value"
              style="width: 50px"
              @keyup.native="vaildInput($event)"
            ></el-input-number
            >点积分
          </div>
        </div>
        <div v-if="item.ruleType === 1" style="font-size: 14px">
          <el-checkbox v-model="item.open"></el-checkbox>
          <span style="margin-left: 10px">登录</span>
          <span style="color: #d3d3d3"
            >（每日首次登录获得积分，7天中有2个节点可以额外赠送积分，第8天00:00数据清空）</span
          >
          <div class="integral__content--ruleInput">
            每日首次登录获得
            <el-input-number
              :min="0"
              step-strictly
              :step="1"
              :controls="false"
              v-model="item.integralRuleParameterDtos[0].value"
              style="width: 50px"
              @keyup.native="vaildInput($event)"
            ></el-input-number
            >点积分,第
            <el-input-number
              :min="0"
              step-strictly
              :step="1"
              :controls="false"
              v-model="item.integralRuleParameterDtos[1].value"
              style="width: 50px"
              @keyup.native="vaildInput($event)"
            ></el-input-number
            >天连续登录将额外获赠
            <el-input-number
              :min="0"
              :step="1"
              step-strictly
              :controls="false"
              v-model="item.integralRuleParameterDtos[2].value"
              style="width: 50px"
              @keyup.native="vaildInput($event)"
            ></el-input-number
            >点积分；第
            <el-input-number
              :min="0"
              :step="1"
              step-strictly
              :controls="false"
              v-model="item.integralRuleParameterDtos[3].value"
              style="width: 50px"
              @keyup.native="conVaildInput($event)"
            ></el-input-number
            >天连续登录将额外获得
            <el-input-number
              :min="0"
              :step="1"
              step-strictly
              :controls="false"
              v-model="item.integralRuleParameterDtos[4].value"
              style="width: 50px"
              @keyup.native="vaildInput($event)"
            ></el-input-number
            >点积分。
          </div>
        </div>
        <div v-if="item.ruleType === 2" style="font-size: 14px">
          <el-checkbox v-model="item.open"></el-checkbox>
          <span style="margin-left: 10px">签到</span>
          <span style="color: #d3d3d3"
            >（每日签到获得积分，7天中有2个节点可以额外赠送积分，第8天00:00数据清空）</span
          >
          <div class="integral__content--ruleInput">
            每日首次签到获得
            <el-input-number
              :min="0"
              :step="1"
              step-strictly
              :controls="false"
              v-model="item.integralRuleParameterDtos[0].value"
              style="width: 50px"
              @keyup.native="vaildInput($event)"
            ></el-input-number
            >点积分,第
            <el-input-number
              :min="0"
              :step="1"
              step-strictly
              :controls="false"
              v-model="item.integralRuleParameterDtos[1].value"
              style="width: 50px"
              @keyup.native="vaildInput($event)"
            ></el-input-number
            >天连续签到将额外获赠
            <el-input-number
              :min="0"
              :step="1"
              step-strictly
              :controls="false"
              v-model="item.integralRuleParameterDtos[2].value"
              style="width: 50px"
              @keyup.native="vaildInput($event)"
            ></el-input-number
            >点积分；第
            <el-input-number
              :min="0"
              :step="1"
              step-strictly
              :controls="false"
              v-model="item.integralRuleParameterDtos[3].value"
              style="width: 50px"
              @keyup.native="conVaildInput($event)"
            ></el-input-number
            >天连续签到将额外获得
            <el-input-number
              :min="0"
              :step="1"
              step-strictly
              :controls="false"
              v-model="item.integralRuleParameterDtos[4].value"
              style="width: 50px"
              @keyup.native="vaildInput($event)"
            ></el-input-number
            >点积分。
          </div>
        </div>
        <div v-if="item.ruleType === 3" style="font-size: 14px">
          <el-checkbox v-model="item.open"></el-checkbox>
          <span style="margin-left: 10px">步数</span>
          <span style="color: #d3d3d3"
            >（每天可以兑换多次，兑换只要到达步数都可兑换，超过固定步数额外赠送积分）</span
          >
          <div class="integral__content--ruleInput">
            每到达
            <el-input-number
              :min="0"
              :step="1"
              step-strictly
              :controls="false"
              v-model="item.integralRuleParameterDtos[0].value"
              style="width: 70px"
              @keyup.native="vaildInput($event)"
            ></el-input-number
            >步数可获得
            <el-input-number
              :min="0"
              :step="1"
              step-strictly
              :controls="false"
              v-model="item.integralRuleParameterDtos[1].value"
              style="width: 50px"
              @keyup.native="vaildInput($event)"
            ></el-input-number
            >点积分。
          </div>
        </div>
      </div>
      <div class="bottom__btn">
        <el-button type="primary" @click="saveRule">保存</el-button>
        <el-button @click="cancelRule">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { integralRuleUpdate } from "@/api/integral/integral";
Component.registerHooks(["beforeRouteLeave"]);

@Component
export default class EditRule extends Vue {
  get option() {
    return this.$parent.ruleOption;
  }

  get getList() {
    return this.$parent.getList;
  }

  ruleModel: any = this.option;

  list: any = this.getList;

  /** 验证规则 */
  regs = /^\+?[1-9][0-9]*$/;

  vaildInput(e) {
    if (!this.regs.test(e.target.value)) {
      e.target.value = "";
    }
  }

  conVaildInput(e) {
    if (!this.regs.test(e.target.value)) {
      e.target.value = "";
    }
    if (Number(e.target.value) > 7) {
      this.$message.error("连续签到天数不可大于7天");
      e.target.value = "";
    }
  }

  /**
   * 保存编辑
   */
  saveRule() {
    let valid = true;
    this.list.forEach((item) => {
      item.integralRuleInfo = this.ruleModel.integralRuleInfo;
      item.integralValidity = this.ruleModel.integralValidity;
      item.useRuleIntroduce = this.ruleModel.useRuleIntroduce;
      if (item.open) {
        item.integralRuleParameterDtos.forEach((v) => {
          if (!v.value) {
            valid = false;
          }
        });
      }
    });
    const integralTime = this.regs.test(this.ruleModel.integralValidity);
    if (!integralTime) {
      this.$message.error("请输入整数的积分有效期");
      return;
    }
    if (!valid) {
      this.$message.error("请为选中规则输入内容");
      return;
    }
    integralRuleUpdate(this.list).then(() => {
      this.$message.success("编辑成功");
      this.$parent.comName = "RuleContent";
    });
  }

  /**
   * 取消保存
   */
  cancelRule() {
    this.$confirm(
      "确定取消编辑积分规则页面吗？取消后，未保存的信息将不保留",
      "提示",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      },
    ).then(() => {
      this.$parent.comName = "RuleContent";
    });
  }

  beforeRouteLeave(to, from, next) {
    if (this.saveFlag) {
      next();
      return;
    }
    this.$confirm(
      `确定要退出${
        this.$route.params.id ? "编辑" : "发布"
      }积分商品页面?退出后，未保存的信息将不会保留!`,
      "提示",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      },
    ).then(() => {
      next();
    });
  }
}
</script>

<style lang="scss" scoped>
@include b(integral) {
  font-size: 15px;
  padding-left: 15px;
  @include e(title) {
    color: #64a9f4;
    font-weight: bold;
    font-size: 14px;
    margin-top: 20px;
  }
  @include e(content) {
    margin-top: 20px;
    padding: 0px 20px;
    @include m(ruleInput) {
      margin-left: 20px;
      margin-top: 10px;
      font-size: 14px;
    }
  }
}

.bottom__btn {
  margin-top: 40px;
}
</style>
